<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>旋转按钮</title>
    <style type="text/css">
        #box{
            width: 600px;
            margin: 0 auto;
        }
        ul li {
            float: left;
            margin: 10px;
            list-style: none;
        }
        #box img {
            transition: all 0.5s linear;
        }
        #box img:hover {
            transform: rotate(360deg) scale(1.2);
        }
    </style>
</head>
<body>
<ul id="box">
    <a href="index.html">作业一</a>
    <a href="demo.html">作业二</a>
    <a href="temp.html">作业三</a>
    <h1>顺时针旋转360度放大1.2倍</h1>
    <li><a href="#"><img src="img/rss.png" /></a></li>
    <li><a href="#"><img src="img/delicious.png" /></a></li>
    <li><a href="#"><img src="img/facebook.png" /></a></li>
    <li><a href="#"><img src="img/twitter.png"/></a></li>
    <li><a href="#"><img src="img/yahoo.png" /></a></li>
</ul>

</body>
</html>